<template>
    <div class="course_wrap">
        <y-tape></y-tape>
		<div class="intro-wrap">
            <div class="title">独一无二的修炼秘籍，让你变身魅力女神！</div>
            <div class="desc">爱情到底是什么？他到底爱我的什么？又为什么不爱我了？为什么在爱情里我就变了个样子？PUA这种骗局我该怎样避免？我又该如何享受爱情呢？......</div>
        </div>
        <div class="audio-container">
            <y-progress-bar :currentTime="currentTime" :endTime="endTime" :audioEnd="audioEnd" :currentTimeChange="changeCurrentTime"/>
            <div class="play-wrap">
                <img src="./assets/audio_prev.png" alt="" 
                    class="progress-control audio-progress-prev"
                    @click="backwardAudio"
                >
                <div class="play-icon-wrap" @click="togglePlay">
					<span class="iconfont" :class="iconName" ></span>
                </div>
                <img src="./assets/audio_next.png" alt="" 
                    class="progress-control audio-progress-next"
                    @click="forwardAudio"
                >
            </div>
        </div>
        <audio 
        src="https://cdn.yryz.com/lovelorn/audio/default/201905/%E5%90%B8%E5%BC%95%E5%8A%9B%E7%9A%84%E6%9C%AC%E8%B4%A8%E5%92%8C%E5%88%86%E6%89%8B%E7%9A%84%E6%B7%B1%E5%B1%82%E5%8E%9F%E5%9B%A0.m4a"
        ref="audioRef" 
		preload="auto"
		@timeupdate="updateTime"
		@canplaythrough="audioReady"
		@durationchange="audioReady"
        @ended="endPlay"
        ></audio>
    </div>
</template>

<script>
import Video from '@/components/video';
import ProgressBar from './components/progress-bar';
import Tape from './components/tape';
export default {
    components: {
        [Video.name]: Video,
        [ProgressBar.name]: ProgressBar,
        [Tape.name]: Tape,
    },
    data() {
        return {
			userId: '',
            currentTime: 0,
            endTime: 0,
            isPlaying: false,
            audioEnd: false,
        }
	},
	methods: {
        // 切换播放音频
        togglePlay() {
            this.isPlaying = !this.isPlaying;
            let audioRef = this.$refs.audioRef;
            if (this.isPlaying) {
                audioRef.play();
            } else {
                audioRef.pause();
            }
        },
        // 音频完全加载完成时触发
        audioReady() {
            this.endTime = this.$refs.audioRef.duration;
        },
        // 目前的播放位置已更改时触发
        updateTime(e) {
            this.currentTime = e.target.currentTime;
            if (this.currentTime === this.endTime) {
                this.isPlaying = false;
            }
        },
        // 音频播放完成
        endPlay() {
            this.isPlaying = false;
        },
        // 后退15s
        backwardAudio() {
            this.currentTime -= 15;
            this.changeCurrentTime(this.currentTime);
        },
        // 前进15s
        forwardAudio() {
            this.currentTime += 15;
            this.changeCurrentTime(this.currentTime);
        },
        // 当前播放时间修改
        changeCurrentTime(currTime) {
            currTime = currTime < 0 ? 0 : currTime > this.endTime ? this.endTime : currTime;
            this.$refs.audioRef.currentTime = currTime;
		},
		stopAudio() {
			this.$refs.audioRef && this.$refs.audioRef.pause();
		}
       
    },
    watch: {
    },
    computed: {
        iconName() {
            return this.isPlaying ? 'icon-pause' : 'icon-play';
		}
    },
    created() {
		if (this.$utils.isWeiXin()) {
			this.$utils.wxShare({
				title: '7天变身魅力女神',
				desc: '独一无二的情感秘籍，自我管理、魅力提升、两性关系、狙击真爱，限时免费送！！！',
				link: `${window.location.origin}/official-activity/redeem`,
				imgUrl: 'https://cdn.yryz.com/lovelorn/image/default/201905/358360856731648.png?w=690&h=370', 
			})
		}
	},
	mounted() {
		// ios内无法拿到实时时长
		if (this.endTime <= 0) {
			this.endTime = 1480;
		}
    },
    beforeDestroy() {
    }
}
</script>

<style type="text/css">
.course_wrap {
    background: #fff;
    padding: .7rem .7rem 1rem;
    min-height: 100vh;
   
    & .intro-wrap{
        margin-top: 0.3rem;

        & .title{
            font-size: 0.56rem;
            color: #000;
            font-weight: 700;
        }
        & .desc{
            margin-top: 0.3rem;
            font-size: 0.28rem;
            color: #000;
        }
    }
    & .audio-container {
        margin-top: 2.6rem;
    }
    & .play-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.5rem;
        margin-top: 1rem;
    }
    & .play-icon-wrap{
        width: 1.34rem;
        height: 1.34rem;
        background: #ed008c;
        border-radius: 0.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
       
        & .iconfont {
            color: #fff;
            font-size: 0.45rem;
        }
    }
    & .progress-control{
        width: 0.54rem;
        height: 0.56rem;
    }
    

}
</style>
